<template>
	<div>
		<div class="head">
			<div class="left">
				<span class="date">{{date}}</span>
				<span class="month">{{month}}月</span>
			</div>
			<div class="center">
				<h2>知乎日报</h2>
			</div>
			<div class="right">
				
			</div>
			<indexcom></indexcom>
		</div>
		<div class="swiperbox">
			<swiper></swiper>
		</div>
		<div class="listbox">
			<list></list>
		</div>
	</div>
</template>

<script>
	import indexcom from "../components/indexcom.vue"
	import swiper from "../components/swiper.vue"
	import list from "../components/list.vue"
	export default{
		data(){
			return{
				date:"",
				month:"",
			}
		},
		created:function(){
			var data=new Date();
			var date1=data.getDate();
			this.date=date1;
			var month1=data.getMonth()+1;
			month1=month1==9?"九":"九"
			this.month=month1;
		},
		components:{
			indexcom,
			swiper,
			list,
		}
	}
</script>

<style>
	.head{
		width: 100%;
		padding: 10px 8px;
		display: flex;
	}
	.left{
		flex:1;
		text-align: center;
	}
	.date{
		font-size: 26px;
		font-weight: 500px;
		display: block;
	}
	.month{
		font-size:12px;
		line-height: 10px;
	}
	.center{
		flex:0 70% ;
		margin: 10px 0px;
		border-left: 1px solid gainsboro;
		text-indent: 5%;
	}
	.right{
		flex:1;
	}
	.swiperbox{
		width: 100%;
		height: 260px;
		padding:0px 6px;
	}
	.listbox{
		width: 100%;
	}
</style>

